<!DOCTYPE html>
<html>
<head>
    <title>layUi入门</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 你的HTML代码 -->

    <script src="layui/layui.js"></script>
    <script type="text/html" id="userToolBar">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i
                class="layui-icon">&#xe654;</i>新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
        <div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="search"><i class="layui-icon layui-icon-search"></i></div>
        <input type="text" id="userName" style="width:200px;float:right;height:30px;" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </script>
    <script type="text/javascript">

        layui.use(['element', 'form', 'table', 'layer', 'laydate'], function () {
            var layer = layui.layer;

            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            var formSelects = layui.formSelects;
            var laydate = layui.laydate;
            //新增提交
            form.on('submit(addsubmit)', function(data){
                var formData=$('#addform').serialize();
                $.post("./UserServlet?method=insertUser",formData,function(msg){
                    if(msg>0){
                        table.reload('userTable');
                        layer.closeAll();
                        layer.msg('添加成功',{
                            title : '提示',
                            area : [ '200px',
                                '140px' ],
                            time : 0,
                            btn : [ '知道了' ]
                        });
                    }else{
                        layer.closeAll();
                        layer.msg('添加失败',{
                            title : '提示',
                            area : [ '200px',
                                '140px' ],
                            time : 0,
                            btn : [ '知道了' ]
                        });
                    }
                });
                return false;
            });
            //修改提交
            form.on('submit(editsubmit)', function(data){
                var formData=$('#editform').serialize();
                $.post("./UserServlet?method=updateUser",formData,function(msg){
                    if(msg>0){
                        table.reload('userTable');
                        layer.closeAll();
                        layer.msg('修改成功',{
                            title : '提示',
                            area : [ '200px',
                                '140px' ],
                            time : 0,
                            btn : [ '知道了' ]
                        });
                    }else{
                        layer.closeAll();
                        layer.msg('修改失败',{
                            title : '提示',
                            area : [ '200px',
                                '140px' ],
                            time : 0,
                            btn : [ '知道了' ]
                        });
                    }
                });
                return false;
            });
            table.render({
                elem: '#userTable',
                url: './selectUser',
                page: true,
                height: 498,
                toolbar: '#userToolBar',//显示在表头的工具条
                minLength:80,
                cols: [[
                    {
                        field: 'userId',
                        align: 'center',
                        title: '用户ID',
                        checkbox:true,
                        style: 'color: #01BDF4;'
                    }, {
                        field: 'userName',
                        align: 'center',
                        title: '用户名称',

                    }, {
                        field: 'userPwd',
                        title: '密码',
                        align: 'center',


                    }, {
                        field: 'roleId',
                        title: '角色ID',
                        align: 'center',
                        width: 50

                    },
                    {
                        fixed : 'right',
                        title : '操作',
                        toolbar : '#barDemo',//绑定一个工具条
                        width : 200
                    }
                ]]
            });
            //给工具条的按钮添加事件
            table.on('toolbar(userTable)',function (obj) {
                //获取选中复选框的对象，
                var checkStatus=table.checkStatus(obj.config.id);//得到表格选中行的ID
                switch (obj.event) {
                    case 'add':
                        var index=layer.open({
                            type: 1,
                            title: '添加用户信息',
                            closeBtn: 1,
                            move:false,
                            content:$("#addContent"),
                            btn:[]
                        });
                        $.ajax({
                            url:'./RoleServlet?method=selectRole',
                            dataType:'json',
                            type:'post',
                            success:function(obj){

                                $.each(obj.data,function(index,item){
                                    $('#roleId').append(new Option(item.roleName,item.roleId));//往下拉菜单里添加元素
                                })

                                form.render();//菜单渲染 把内容加载进去
                            }
                        })
                        form.render();
                        //全屏
                        layer.full(index);
                        break;
                    case 'search':
                        alert("搜索");
                        var userName= $("#userName").val();
                        //表格的重新加载事件
                        table.reload('userTable', {
                            method: 'post'
                            , where: {
                                'userName': userName
                            }
                            , page: {
                                curr: 1
                            }
                        });

                        break;
                    case 'deleteAll':
                        var data = checkStatus.data;
                        //    layer.alert(JSON.stringify(data));
                        if(data.length==0){
                            layer.msg("请至少选择一条数据",)
                        }else
                        {
                            var ids=[];
                            for (var i = 0; i <data.length; i++) {
                                ids.push(data[i].userId);
                            }
                            layer.confirm('真的删除行么',{icon: 2}, function(index){
                                layer.close(index);
                                $.post("./UserServlet?method=deleteUser", {userId:ids.join(',')},function(msg){
                                    table.reload('userTable');
                                    layer.msg('删除'+checkStatus.data.length+'条记录', {
                                        title:'提示',
                                        area: ['200px', '140px'],
                                        time: 0,
                                        btn: ['知道了']
                                    });
                                });
                            });
                        }
                        break;
                }
            });
            //给表格编辑，删除按钮添加点击事件
            table.on('tool(userTable)', function(obj) {
                var data = obj.data;//得到删除行整行的数据
                alert(data.userId);
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么',{icon: 2}, function(index){
                        layer.close(index);
                        $.post("./UserServlet?method=deleteUser", {userId:data.userId+""},function(msg){
                            table.reload('userTable');
                        });

                    });
                } else if (obj.event === 'edit') {
                    // var roleId=data.role.roleId;
                    alert(JSON.stringify(data));


                    form.val('editform',$.parseJSON(JSON.stringify(data)));
                    var index = layer.open({
                        type: 1,
                        title: '修改员工',
                        closeBtn: 1,
                        move:false,
                        area: ['500px', '400px'],
                        content:$('#editContent')
                    });
                    $.ajax({
                        url:'./RoleServlet?method=selectRole',
                        dataType:'json',
                        type:'post',
                        success:function(obj){

                            $.each(obj.data,function(index,item){
                                $('#roleId_2').append(new Option(item.roleName,item.roleId));//往下拉菜单里添加元素
                            })
                            $("#roleId_2 option[value='"+data.roleId+"']").attr("selected", "selected");

                            form.render();//菜单渲染 把内容加载进去
                        }
                    })
                    form.render();

                    layer.full(index);
                };
            })
        });

    </script>
</head>
<body style="overflow: auto; background-color: white;"
      class="layui-view-body layui-content">
<div>
    <!--表格-->
    <table id="userTable" lay-filter="userTable"></table>
    <!--工具条-->
    <div style="display: none;" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i
                class="layui-icon">&#xe642;</i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                class="layui-icon">&#xe640;</i>删除</a>

    </div>
</div>
<!--增加的div内容-->
<div id="addContent"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="addform" lay-filter="addform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline">
                <input type="text" name="userId" lay-verify="required"
                       autocomplete="off" placeholder="请输入用户ID" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" lay-verify="required"
                       autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-inline">
                <input type="password" name="userPwd" lay-verify="required"
                       autocomplete="off" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">请选择角色</label>
            <div class="layui-input-inline">
                <select id="roleId" name="roleId" xm-select="add" xm-select-radio=""
                        xm-select-search="" lay-verify="required"
                        xm-select-direction="down" xm-select-search-type="dl">
                </select>
            </div>
        </div>
        <div style="position: absolute; bottom: 0px; left: 45%;">
            <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                <i class="layui-icon">&#x1005;</i>添加
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>

<!--修改的div内容-->
<div id="editContent"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="editform" lay-filter="editform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline">
                <input type="text" name="userId" lay-verify="required"
                       autocomplete="off" placeholder="请输入用户ID" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" lay-verify="required"
                       autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-inline">
                <input type="password" name="userPwd" lay-verify="required"
                       autocomplete="off" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">请选择角色</label>
            <div class="layui-input-inline">
                <select id="roleId_2" name="roleId" xm-select="add" xm-select-radio=""
                        xm-select-search="" lay-verify="required"
                        xm-select-direction="down" xm-select-search-type="dl">
                </select>
            </div>
        </div>
        <div style="position: absolute; bottom: 0px; left: 45%;">
            <button class="layui-btn" lay-submit="" lay-filter="editsubmit">
                <i class="layui-icon">&#x1005;</i>添加
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>

</body>
</html>
